<template>
  <div>
    <Main :type="'form'">
      <div>
        <Title :title="'支付设置'"></Title>

        <div>
          <el-form
            ref="forms"
            :model="form"
            label-width="180px"
            style="width:800px;  display: inline-block; "
            :rules="rules"
          >
            <el-form-item label="APPID" prop="input1">
              <el-input
                v-model="form.input1"
                placeholder="请输入19位ID"
                style="width:546px;"
                size="medium"
              ></el-input>
            </el-form-item>
            <el-form-item label="APPSECRET" prop="input2">
              <el-input
                v-model="form.input2"
                placeholder="请输入32位APPSECRET"
                style="width:546px;"
                size="medium"
              ></el-input>
            </el-form-item>
            <div
              style="font-family: PingFangSC-Medium;font-size: 14px; color: #999999; padding-left: 96px; margin: 22px 86px 60px 88px; "
            >
              注释：APPID、APPSECRET通过公众号登陆小程序—设置—开发设置获得
            </div>
            <el-form-item label="商户ID" prop="input3">
              <el-input
                v-model="form.input3"
                placeholder="请输入10位商户ID"
                style="width:546px;"
                size="medium"
              ></el-input>
            </el-form-item>
            <el-form-item label="商户秘钥" prop="input4">
              <el-input
                v-model="form.input4"
                placeholder="请输入32位商户秘钥"
                style="width:546px;"
                size="medium"
              ></el-input>
            </el-form-item>
            <el-form-item label="上传支付证书" prop="input5">
              <el-button
                type="primary"
                style="background-color:#fff;color: black;border: 1px dashed #cccccc; width:80px; height:80px;margin-left: 20px;"
                icon="el-icon-plus"
                @click="chufa('upload_file0')"
              ></el-button>
              <span
                v-if="form.input5 && form.input5.name.length > 0"
                style="font-size: 12px"
                >{{ form.input5.name }}</span
              >
              <span v-if="!form.input5" style="font-size: 12px">{{
                form.input5_name
              }}</span>
              <input
                id="upload_file0"
                accept=".pem"
                name="img"
                type="file"
                style="display: none;"
                @change="l($event)"
              />
            </el-form-item>
            <el-form-item label="上传证书密钥" prop="input6">
              <el-button
                type="primary"
                style="background-color:#fff;color: black;border: 1px dashed #cccccc; width:80px; height:80px;margin-left: 20px;"
                icon="el-icon-plus"
                @click="chufa('upload_file1')"
              ></el-button>
              <span
                v-if="form.input6 && form.input6.name.length > 0"
                style="font-size: 12px"
                >{{ form.input6.name }}</span
              >
              <span v-if="!form.input6" style="font-size: 12px">{{
                form.input6_name
              }}</span>
              <input
                id="upload_file1"
                accept=".pem"
                name="img"
                type="file"
                style="display: none;"
                @change="l1($event)"
              />
            </el-form-item>
            <div
              style="font-family: PingFangSC-Medium;font-size: 14px; color: #999999;  padding-left: 182px;"
            >
              注释：商户ID、商户密钥、支付证书、支付密钥通过登陆微信支付获得；上传图片为pem格式
            </div>
          </el-form>
        </div>
      </div>
    </Main>
    <Footer>
      <el-button type="primary" @click="onSubmit('forms')">确认设置</el-button>
    </Footer>
    <!-- <div class="list-page">

    </div> -->
  </div>
</template>
<script>
import { GETONE, ADD } from "./service";

export default {
  // eslint-disable-next-line vue/require-prop-types
  props: ["name"],
  data() {
    return {
      fileList: [],
      form: {
        input1: "",
        input2: "",
        input3: "",
        input4: "",
        input5: "",
        input5_name: "",
        input6_name: "",
        input6: ""
      },
      delivery: false,
      rules: {
        input1: [
          { required: true, message: "请输入19位ID", trigger: "blur" },
          { max: 19, message: "长度为19个字符", trigger: "blur" }
        ],
        input2: [
          { required: true, message: "请输入32位APPSECRET", trigger: "blur" },
          { max: 32, message: "长度为32个字符", trigger: "blur" }
        ],
        input3: [
          { required: true, message: "请输入10位商户ID", trigger: "blur" },
          { max: 10, message: "长度为10个字符", trigger: "blur" }
        ],
        input4: [
          { required: true, message: "请输入32位商户秘钥", trigger: "blur" },
          { max: 32, message: "长度为32个字符", trigger: "blur" }
        ],
        input5: [{ required: true, message: "请添加图片", trigger: "blur" }],
        input6: [{ required: true, message: "请添加图片", trigger: "blur" }]
      }
    };
  },
  computed: {
    _name() {
      return this.name;
    }
  },
  created() {
    this.init();
  },
  methods: {
    async init() {
      // var parms = new FormData();
      // parms.append('app_id', this.$store.state.app_id);
      // parms.append('_token', this.$store.state._token);
      await GETONE().then(res => {
        let { code, data } = res;
        if (code === 200) {
          this.form.input1 = data.appid;
          this.form.input2 = data.appsecret;
          this.form.input3 = data.mch_id;
          this.form.input4 = data.mch_key;
          this.form.input5_name = data.certificate;
          this.form.input6_name = data.certificate_key;
        }
      });
    },
    l(e) {
      this.form.input5 = e.target.files[0];
    },
    l1(e) {
      this.form.input6 = e.target.files[0];
    },
    chufa(index) {
      document.getElementById(index).click();
    },
    async onSubmit(forms) {
      await this.$refs[forms].validate(valid => {
        if (valid) {
          var shuju = new FormData();
          shuju.append("appid", this.form.input1);
          shuju.append("app_id", this.$store.state.app_id);
          shuju.append("appsecret", this.form.input2);
          shuju.append("mch_id", this.form.input3);
          shuju.append("mch_key", this.form.input4);
          shuju.append("peminput", this.form.input5);
          shuju.append("peminputs", this.form.input6);

          shuju.append("_token", this.$store.state._token);
          ADD(shuju).then(res => {
            let { code, msg } = res;
            this.$message({
              message: msg,
              type: code === 200 ? "success" : "error"
            });
          });
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped></style>
